<template>
  <div class="device-stats-container">
    <!-- 整体统计卡片 -->
    <div class="overview-cards">
      <div class="overview-card" v-for="card in overviewCards" :key="card.title">
        <div class="card-icon" :style="{ background: card.bgColor  }">
          <i :class="card.icon"></i>
        </div>
        <div class="card-content">
          <div class="card-title">{{ card.title }}</div>
          <div class="card-value">{{ card.value }}</div>
        </div>
      </div>
    </div>

    <!-- 各机型详细统计 -->
    <div class="device-details">
      <div class="device-table">
        <div class="table-header">
          <div class="header-cell">机型名称</div>
          <div class="header-cell">总台数</div>
          <div class="header-cell">在线数</div>
          <div class="header-cell">活跃数</div>
          <div class="header-cell">活跃度</div>
          <div class="header-cell">状态</div>
        </div>
        <div class="table-body">
          <div
              class="table-row"
              v-for="device in processedDeviceData"
              :key="device.name"
              :style="{ 'border-left-color': getStatusColor(device.status)  }"
          >
            <div class="body-cell name-cell">{{ device.name }}</div>
            <div class="body-cell">{{ device.total }}</div>
            <div class="body-cell">
              {{ device.online }}
              <span class="online-rate">({{ calculateOnlineRate(device) }}%)</span>
            </div>
            <div class="body-cell">{{ device.activity }}</div>
            <div class="body-cell">
              <div class="activity-indicator">
                <div class="activity-level" :style="{ background: getActivityColor(device.activityRate)  }"
                ></div>
                <span class="activity-text">{{ device.activityRate }}%</span>
              </div>
            </div>
            <div class="body-cell">
              <span class="status-badge" :style="{ background: getStatusColor(device.status)  }">
                {{ device.status }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {computed} from 'vue'

export default {
  name: 'DeviceUsageStats',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  setup(props) {
// 处理设备数据，添加状态字段
    const processedDeviceData = computed(() => {
      return props.data.map(device => {
// 计算活跃率
        const activityRate = Math.round(device.activity / device.total * 100)

// 根据活跃率确定状态
        let status = '正常'
        if (activityRate > 80) status = '良好'
        else if (activityRate < 40) status = '注意'
        else if (device.online === 0) status = '离线'

        return {
          ...device,
          activityRate, // 添加活跃率字段
          status
        }
      })
    })

// 计算整体统计数据
    const totalStats = computed(() => {
      return props.data.reduce((acc, device) => {
        acc.total += device.total
        acc.online += device.online
        acc.active += device.activity
        acc.offline += (device.total - device.online)
        return acc
      }, {
        total: 0,
        online: 0,
        active: 0,
        offline: 0,
      })
    })

    const overviewCards = computed(() => [
      {
        title: '总设备数',
        value: totalStats.value.total,
        icon: 'el-icon-cpu',
        bgColor: 'rgba(54, 162, 235, 0.2)',
        color: '#36a2eb'
      },
      {
        title: '在线设备',
        value: totalStats.value.online,
        icon: 'el-icon-connection',
        bgColor: 'rgba(75, 192, 192, 0.2)',
        color: '#4bc0c0'
      },
      {
        title: '活跃设备',
        value: totalStats.value.active,
        icon: 'el-icon-data-line',
        bgColor: 'rgba(255, 206, 86, 0.2)',
        color: '#ffce56'
      },
      {
        title: '离线设备',
        value: totalStats.value.offline,
        icon: 'el-icon-warning',
        bgColor: 'rgba(255, 99, 132, 0.2)',
        color: '#ff6384'
      }
    ])

// 计算在线率
    const calculateOnlineRate = (device) => {
      return device.total > 0 ? Math.round((device.online / device.total) * 100) : 0
    }

// 获取状态颜色
    const getStatusColor = (status) => {
      const colors = {
        '良好': '#36a2eb',
        '正常': '#4bc0c0',
        '注意': '#ffce56',
        '离线': '#ff6384',
        '故障': '#ff0000'
      }
      return colors[status] || '#4bc0c0'
    }

// 获取渐变颜色（基于活跃率）
    const getGradientColor = (rate) => {
      if (rate > 80) return 'linear-gradient(90deg, #4bc0c0, #36a2eb)'
      if (rate > 60) return 'linear-gradient(90deg, #ffce56, #ff9f40)'
      return 'linear-gradient(90deg, #ff6384, #ff8c8c)'
    }

// 获取活跃度颜色（基于活跃率）
    const getActivityColor = (rate) => {
      if (rate > 80) return '#36a2eb'
      if (rate > 60) return '#4bc0c0'
      if (rate > 40) return '#ffce56'
      return '#ff6384'
    }

    return {
      processedDeviceData,
      overviewCards,
      calculateOnlineRate,
      getStatusColor,
      getGradientColor,
      getActivityColor
    }
  }
}
</script>
<style scoped>
.usage-progress, .activity-indicator {
  position: relative;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-bar, .activity-level {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

/* 添加条纹动画效果 */
.progress-bar::after, .activity-level::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
  );
  background-size: 20px 20px;
  animation: progressStripes 2s linear infinite;
}

@keyframes progressStripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

.progress-text, .activity-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* 优化状态徽章 */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  min-width: 50px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.device-stats-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}


/* 响应式卡片布局 */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

/* 卡片基础样式 */
.overview-card {
  min-width: 0; /* 防止内容溢出 */
  display: flex;
  align-items: center;
  padding: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  margin-left: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
}

.card-value {
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.device-details {
  flex: 1;
  overflow: hidden;
}

.device-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  overflow: hidden;
}

.table-header, .table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr;
  align-items: center;
  padding: 10px;
}

.table-header {
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.table-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.1);
}

.table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
  padding-left: 10px;
  border-left: 4px solid;
}

.table-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.body-cell {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  padding: 5px 0;
}

.name-cell {
  font-weight: 500;
  color: white;
}

.online-rate {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin-left: 5px;
}
</style>